<template>
	<view class="container generator-container">
		<view class="header">
			<text class="title">密码生成器</text>
			<text class="subtitle">生成安全可靠的密码</text>
		</view>
		
		<!-- 生成的密码显示区域 -->
		<view class="password-display">
			<view class="password-box">
				<view class="password-content">
					<text class="password-text" :class="{ 'hidden': !showPassword }">
						{{ generatedPassword || '点击生成密码' }}
					</text>
					
				</view>
				<view class="password-actions">
					<view  class="action-btn" @click="togglePasswordVisibility">
						<text class="action-icon">{{ showPassword ? '👀' : '👁' }}</text>
					</view>
					<view title="复制" class="action-btn" @click="copyPassword" v-if="generatedPassword">
						<text class="action-icon">🔑</text>
					</view>
					<view title="重新生成" class="action-btn" @click="regeneratePassword">
						<text class="action-icon">🔨</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 密码强度指示器 -->
		<view class="strength-indicator" v-if="generatedPassword">
			<text class="strength-label">密码强度：</text>
			<view class="strength-bars">
				<view 
					class="strength-bar" 
					v-for="i in 4" 
					:key="i"
					:class="{ 'active': i <= strengthLevel }"
				></view>
			</view>
			<text class="strength-text">{{ strengthText }}</text>
		</view>
		
		<!-- 生成选项 -->
		<view class="options-section">
			<text class="section-title">生成选项</text>
			
			<!-- 密码长度 -->
			<view class="option-item">
				<text class="option-label">密码长度：{{ passwordLength }}</text>
				<slider 
					:value="passwordLength" 
					:min="8" 
					:max="32" 
					:step="1"
					@change="onLengthChange"
					activeColor="#007aff"
					backgroundColor="#e0e0e0"
				/>
			</view>
			
			<!-- 字符类型选项 -->
			<view class="option-item">
				<text class="option-label">包含字符类型：</text>
				<view class="checkbox-group">
					<view class="checkbox-item" @click="toggleOption('uppercase')">
						<view class="checkbox" :class="{ 'checked': options.uppercase }">
							<text class="check-icon" v-if="options.uppercase">✓</text>
						</view>
						<text class="checkbox-label">大写字母 (A-Z)</text>
					</view>
					<view class="checkbox-item" @click="toggleOption('lowercase')">
						<view class="checkbox" :class="{ 'checked': options.lowercase }">
							<text class="check-icon" v-if="options.lowercase">✓</text>
						</view>
						<text class="checkbox-label">小写字母 (a-z)</text>
					</view>
					<view class="checkbox-item" @click="toggleOption('numbers')">
						<view class="checkbox" :class="{ 'checked': options.numbers }">
							<text class="check-icon" v-if="options.numbers">✓</text>
						</view>
						<text class="checkbox-label">数字 (0-9)</text>
					</view>
					<view class="checkbox-item" @click="toggleOption('symbols')">
						<view class="checkbox" :class="{ 'checked': options.symbols }">
							<text class="check-icon" v-if="options.symbols">✓</text>
						</view>
						<text class="checkbox-label">特殊字符 (!@#$%^&*)</text>
					</view>
				</view>
			</view>
			
			<!-- 排除字符 -->
			<view class="option-item">
				<text class="option-label">排除字符：</text>
				<input 
					v-model="excludeChars" 
					placeholder="输入要排除的字符,空格分开（可选）"
					class="exclude-input"
				/>
			</view>
		</view>
		
		<!-- 生成按钮 -->
		<view class="generate-section">
			<button class="generate-btn" @click="generatePassword">
				<text class="generate-icon">🔐</text>
				<text class="generate-text">生成密码</text>
			</button>
		</view>
		
		<!-- 历史记录 -->
		<view class="history-section" v-if="passwordHistory.length > 0">
			<view class="section-header">
				<text class="section-title">生成历史</text>
				<text class="clear-btn" @click="clearHistory">清空</text>
			</view>
			<view class="history-list">
				<view 
					class="history-item" 
					v-for="(item, index) in passwordHistory" 
					:key="index"
					@click="useHistoryPassword(item)"
				>
					<view class="history-content">
						<text class="history-password">{{ item.password }}</text>
						<text class="history-length">{{ item.password.length }}位</text>
					</view>
					<text class="history-time">{{ item.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			generatedPassword: '',
			showPassword: true,
			passwordLength: 16,
			options: {
				uppercase: true,
				lowercase: true,
				numbers: true,
				symbols: false
			},
			excludeChars: '',
			passwordHistory: [],
			strengthLevel: 0,
			strengthText: ''
		}
	},
	methods: {
		// 生成密码
		generatePassword() {
			const chars = this.getAvailableChars()
			if (chars.length === 0) {
				uni.showToast({ title: '请至少选择一种字符类型', icon: 'none' })
				return
			}
			
			let password = ''
			for (let i = 0; i < this.passwordLength; i++) {
				const randomIndex = Math.floor(Math.random() * chars.length)
				password += chars[randomIndex]
			}
			
			this.generatedPassword = password
			this.calculateStrength(password)
			this.addToHistory(password)
		},
		
		// 获取可用字符
		getAvailableChars() {
			let chars = ''
			
			if (this.options.uppercase) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
			if (this.options.lowercase) chars += 'abcdefghijklmnopqrstuvwxyz'
			if (this.options.numbers) chars += '0123456789'
			if (this.options.symbols) chars += '!@#$%^&*()_+-=[]{}|;:,.<>?'
			
			// 排除指定字符
			if (this.excludeChars) {
				for (let char of this.excludeChars) {
					chars = chars.replace(new RegExp(char, 'g'), '')
				}
			}
			
			return chars
		},
		
		// 计算密码强度
		calculateStrength(password) {
			let score = 0
			
			// 长度得分
			if (password.length >= 8) score += 1
			if (password.length >= 12) score += 1
			if (password.length >= 16) score += 1
			
			// 字符类型得分
			if (/[A-Z]/.test(password)) score += 1
			if (/[a-z]/.test(password)) score += 1
			if (/[0-9]/.test(password)) score += 1
			if (/[^A-Za-z0-9]/.test(password)) score += 1
			
			this.strengthLevel = Math.min(score, 4)
			
			// 强度文本
			const strengthTexts = ['很弱', '弱', '中等', '强', '很强']
			this.strengthText = strengthTexts[this.strengthLevel - 1] || '很弱'
		},
		
		// 添加到历史记录
		addToHistory(password) {
			const now = new Date()
			const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
			
			this.passwordHistory.unshift({
				password,
				time
			})
			
			// 只保留最近10个
			if (this.passwordHistory.length > 10) {
				this.passwordHistory = this.passwordHistory.slice(0, 10)
			}
		},
		
		// 使用历史密码
		useHistoryPassword(item) {
			this.generatedPassword = item.password
			this.calculateStrength(item.password)
			this.showPassword = true
		},
		
		// 清空历史记录
		clearHistory() {
			uni.showModal({
				title: '确认清空',
				content: '确定要清空所有历史记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.passwordHistory = []
					}
				}
			})
		},
		
		// 切换密码显示
		togglePasswordVisibility() {
			this.showPassword = !this.showPassword
		},
		
		// 复制密码
		copyPassword() {
			if (!this.generatedPassword) return
			
			uni.setClipboardData({
				data: this.generatedPassword,
				success: () => {
					uni.showToast({ title: '密码已复制', icon: 'success' })
				}
			})
		},
		
		// 重新生成密码
		regeneratePassword() {
            this.showPassword = true
			this.generatePassword()
		},
		
		// 长度变化
		onLengthChange(e) {
			this.passwordLength = e.detail.value
		},
		
		// 切换选项
		toggleOption(option) {
			this.options[option] = !this.options[option]
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	display: block;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	margin-top: 10rpx;
	display: block;
}

.password-display {
	margin-bottom: 30rpx;
}

.password-box {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.password-content {
	flex: 1;
	margin-right: 20rpx;
}

.password-text {
	font-size: 28rpx;
	font-family: 'Courier New', monospace;
	color: #333;
	word-break: break-all;
	line-height: 1.4;
	display: block;
}

.password-text.hidden {
	color: #999;
    display: none;
}

.password-length {
	font-size: 24rpx;
	color: #666;
	margin-top: 8rpx;
	display: block;
}

.password-actions {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	flex-shrink: 0;
}

.action-btn {
	width: 60rpx;
	height: 60rpx;
	background: #f0f0f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-icon {
	font-size: 28rpx;
}

.strength-indicator {
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.strength-label {
	font-size: 28rpx;
	color: #333;
	margin-right: 20rpx;
}

.strength-bars {
	display: flex;
	gap: 8rpx;
	margin-right: 20rpx;
}

.strength-bar {
	width: 40rpx;
	height: 8rpx;
	background: #e0e0e0;
	border-radius: 4rpx;
}

.strength-bar.active {
	background: #007aff;
}

.strength-text {
	font-size: 24rpx;
	color: #666;
}

.options-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.option-item {
	margin-bottom: 30rpx;
}

.option-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	display: block;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.checkbox-item {
	display: flex;
	align-items: center;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.checkbox.checked {
	background: #007aff;
	border-color: #007aff;
}

.check-icon {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
}

.checkbox-label {
	font-size: 28rpx;
	color: #333;
}

.exclude-input {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.generate-section {
	margin-bottom: 30rpx;
}

.generate-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #007aff, #0056cc);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

.generate-icon {
	margin-right: 10rpx;
}

.history-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.clear-btn {
	font-size: 24rpx;
	color: #ff3b30;
}

.history-list {
	max-height: 400rpx;
	overflow-y: auto;
}

.history-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.history-item:last-child {
	border-bottom: none;
}

.history-content {
	flex: 1;
	margin-right: 20rpx;
}

.history-password {
	font-size: 26rpx;
	font-family: 'Courier New', monospace;
	color: #333;
	word-break: break-all;
	line-height: 1.3;
	display: block;
}

.history-length {
	font-size: 22rpx;
	color: #666;
	margin-top: 6rpx;
	display: block;
}

.history-time {
	font-size: 24rpx;
	color: #999;
	flex-shrink: 0;
}
</style> 